<style lang="less">
 @import './tags.less';
</style>

<template>
  <div class="tags">
    <a-tag
      v-for="tag in tags"
      :key="tag"
      :closable="closable"
      :class="{ [`ant-tag-${size}`]: size }"
      @click="handleClick"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </a-tag>
  </div>
</template>

<script>
// import Icon from '~/components/icon'

export default {
  props: {
    size: {
      type: String,
      default: '',
    }, // small, large

    closable: {
      type: Boolean,
      default: false,
    },

    dataSource: {
      type: Array || String,
      default: [],
    },
  },

  computed: {
    tags () {
      return [].concat(this.dataSource)
    },
  },

  methods: {
    handleClose (tag) {
      this.$emit('close', tag)
    },

    handleClick (ev) {
      this.$emit('click', ev)
    },
  },
}
</script>
